//引入card,List,Spin,Tag这些组件实现列表组件的单独实现
import { Card, List, Spin, Tag, Pagination } from "antd";
//引入Link实现跳转的详情页
import { Link } from "react-router-dom";
export default function Listdata({ data, loading }) {
  return (
    <div>
      <Spin spinning={loading}>
        <List
          grid={{ gutter: 16, column: 2 }}
          dataSource={data.data?.rows || []}
          renderItem={(item) => (
            <List.Item>
              <Link to={`article/${item.id}`}>
                <Card
                  hoverable //悬停效果
                  title={item.title}
                  extra={<span>{item.viewCount}阅读量</span>}
                >
                  <div>
                    <span>
                      发布时间：{new Date(item.createdAt).toLocaleDateString()}
                    </span>
                    <div>
                      {item.tags.map((tag) => {
                        <Tag color="blue" key={tag.name}>
                          {tag.name}
                        </Tag>;
                      })}
                    </div>
                  </div>
                  <div>{item.content.substring(0, 100)}...</div>
                </Card>
              </Link>
            </List.Item>
          )}
        />
        {/* <div className="pagination-wrapper">
          <Pagination
            current={currentPage}
            total={data?.count || 0}
            onChange={onPageChange}
            pageSize={6}
            showSizeChanger={false}
          />
        </div> */}
      </Spin>
    </div>
  );
}
